import React, { useContext } from 'react';

import Context from '@ctrip/cloud-component-mail-context';
import RedirectTrack from '@ctrip/cloud-component-mail-redirect-track';
import { getI18n, useTripContext } from '@ctrip/trip-component-helper';

import { Button, Right, RightMore, Wrapper } from './components';
import Table from '../../common/src/Table';

import { useRight } from './hooks';
import { SHARKID } from './constants';

const Component = props => {
  const {
    $dsl,
    rightsOrigin = [],
    email = '',
    link = 'https://hk.trip.com/customer/loyalty/black-diamond-invitation?isHideNavBar=YES',
    productionMonitorName = '',
    disableTrackParams = false,
    direction,
  } = props;
  // get config
  const { locale } = useTripContext();
  const i18n55555 = getI18n(SHARKID, locale);
  const username = props.username || i18n55555['key.member.rewards.title'];
  const { rights, rightMore } = useRight(rightsOrigin);

  // track
  const context = useContext(Context);
  const r = new RedirectTrack({ context, dsl: $dsl });

  const trimmedLink = link.trim();
  const encodedEmail = encodeURIComponent(email);
  const _link = `${trimmedLink}${trimmedLink.includes('?') ? '&' : '?'}queryEmail=${encodedEmail}`;
  let _disableTrackParams = disableTrackParams;
  if (_link.indexOf('tripcom.go.link') > -1) _disableTrackParams = true;
  // todowj
  // const jumpInvitation = r.to(
  //   _link,
  //   {
  //     name: productionMonitorName || 'mail-button',
  //     _link: `link length: ${_link?.length}`,
  //   },
  //   { disableTrackParams: _disableTrackParams },
  // );
  const jumpInvitation = `https://deeplink.trip.com/forward/middlepages/?targetUrl=${_link}`;

  return (
    <>
      <Wrapper>
        <tr style={{ display: 'flex', flexDirection: 'column' }}>
          <td>
            <img
              src="http://dimg04.tripcdn.com/images/22w0i12000ki7zlmb07CB.png"
              width={600}
              height={172}
              style={{
                display: 'block',
                border: 'none',
                outline: 'none',
              }}
            />
          </td>
        </tr>
      </Wrapper>
      <Wrapper
        width="100%"
        cellPadding="0"
        cellSpacing="0"
        border="0"
        style={{
          border: 'none',
          borderSpacing: 0,
          width: '100%',
          backgroundColor: '#1a121f',
          padding: '0 12px 0',
          display: 'block',
        }}
      >
        <tr
          style={{
            display: 'block',
            boxSizing: 'border-box',
            paddingTop: 25,
            width: '576px',
            boxSizing: 'border-box',
            backgroundColor: '#fff',
          }}
        >
          <td
            style={{
              display: 'block',
              fontFamily: "'Trip Geom'",
              letterSpacing: '0px',
              color: '#05020d',
              fontSize: 20,
              lineHeight: 1.3,
              fontWeight: 400,
              width: 327,
              marginLeft: '124px',
              textAlign: 'center',
            }}
          >
            <span dangerouslySetInnerHTML={{ __html: i18n55555.Inv_Black_Diamond_EDM_Congrats }} />
          </td>
        </tr>
      </Wrapper>
      <Wrapper
        width="100%"
        cellPadding="0"
        cellSpacing="0"
        border="0"
        style={{
          border: 'none',
          borderSpacing: 0,
          width: '100%',
          backgroundColor: '#1a121f',
          padding: '0 12px 0',
          display: 'block',
        }}
      >
        <tr
          style={{
            display: 'block',
            boxSizing: 'border-box',
            paddingTop: 25,
            width: '576px',
            boxSizing: 'border-box',
            backgroundColor: '#fff',
          }}
        >
          <td
            style={{
              width: '576px',
            }}
          >
            <Button
              width="327px"
              text={i18n55555.Inv_Black_Diamond_EDM_See_Invitation}
              onClickButton={jumpInvitation}
            ></Button>
          </td>
        </tr>
      </Wrapper>
      <Wrapper
        width="100%"
        cellPadding="0"
        cellSpacing="0"
        border="0"
        style={{
          border: 'none',
          borderSpacing: 0,
          width: '100%',
          backgroundColor: '#1a121f',
          padding: '0 12px 0',
          display: 'block',
        }}
      >
        <tr
          style={{
            display: 'block',
            boxSizing: 'border-box',
            paddingTop: 25,
            width: '576px',
            boxSizing: 'border-box',
            backgroundColor: '#fff',
          }}
        >
          <td
            style={{
              width: '100%',
              borderTop: '1px solid #dadfe6',
              margin: '32px 0',
              display: 'block',
            }}
          />
        </tr>
      </Wrapper>
      <Wrapper
        width="100%"
        cellPadding="0"
        cellSpacing="0"
        border="0"
        style={{
          border: 'none',
          borderSpacing: 0,
          width: '100%',
          backgroundColor: '#1a121f',
          padding: '0 12px 0',
          display: 'block',
        }}
      >
        <tr
          style={{
            display: 'block',
            boxSizing: 'border-box',
            paddingTop: 25,
            width: '576px',
            boxSizing: 'border-box',
            backgroundColor: '#fff',
          }}
        >
          <td
            style={{
              letterSpacing: '0px',
              color: '#05020d',
              fontSize: 16,
              lineHeight: 1.5,
              fontWeight: 400,
              marginBottom: 12,
              display: 'block',
            }}
          >
            <span
              dangerouslySetInnerHTML={{
                __html: `${i18n55555.Inv_Black_Diamond_EDM_Dear} ${username},<br/><br/>${i18n55555.Inv_Black_Diamond_EDM_Welcome_Desc}`,
              }}
            ></span>
          </td>
        </tr>
      </Wrapper>
      <Wrapper
        width="100%"
        cellPadding="0"
        cellSpacing="0"
        border="0"
        style={{
          border: 'none',
          borderSpacing: 0,
          width: '100%',
          backgroundColor: '#1a121f',
          padding: '0 12px 0',
          display: 'block',
          marginTop: 32,
        }}
      >
        <tr
          style={{
            display: 'block',
            boxSizing: 'border-box',
            paddingTop: 25,
            width: '576px',
            boxSizing: 'border-box',
            backgroundColor: '#fff',
          }}
        >
          <td>
            {rights.map(item => (
              <Right {...item} direction={direction} />
            ))}
          </td>
        </tr>
      </Wrapper>
      <Wrapper
        width="100%"
        cellPadding="0"
        cellSpacing="0"
        border="0"
        style={{
          border: 'none',
          borderSpacing: 0,
          width: '100%',
          backgroundColor: '#1a121f',
          padding: '0 12px 0',
          display: 'block',
        }}
      >
        <tr
          style={{
            display: 'block',
            boxSizing: 'border-box',
            paddingTop: 25,
            width: '576px',
            boxSizing: 'border-box',
            backgroundColor: '#fff',
          }}
        >
          <td style={{ width: '100%' }}>
            {rightMore && rightMore.length ? <RightMore rightMore={rightMore} /> : null}
          </td>
        </tr>
      </Wrapper>
      <Wrapper
        width="100%"
        cellPadding="0"
        cellSpacing="0"
        border="0"
        style={{
          border: 'none',
          borderSpacing: 0,
          width: '100%',
          backgroundColor: '#1a121f',
          padding: '0 12px 0',
          display: 'block',
        }}
      >
        <tr
          style={{
            display: 'block',
            boxSizing: 'border-box',
            paddingTop: 25,
            width: '576px',
            boxSizing: 'border-box',
            backgroundColor: '#fff',
          }}
        >
          <td>
            <Button
              width="327px"
              text={i18n55555.Inv_Black_Diamond_EDM_See_Invitation}
              onClickButton={jumpInvitation}
            ></Button>
          </td>
        </tr>
      </Wrapper>
    </>
  );
};

Component.beforeNodeBuild = async (ctx, nodeData) => {
  const { tripHelper: { createSoaAgent } = {}, locale, currency } = ctx;
  const { props = {} } = nodeData;

  if (!props?.uid || String(props.uid).indexOf('{{') > -1) {
    return {};
  }

  const getBlackDiamondInvitationInfo = () => {
    const soaAgent = createSoaAgent(18417, { serviceName: 'IBUMemberPropertyService' });
    const args = {
      head: {
        source: 'Online',
        currency,
        uID: String(props.uid),
        locale,
      },
      requestModule: 'BlackDiamondInvitationEmail',
    };
    return soaAgent('GetBlackDiamondInvitationInfo', args, {
      timeout: 2000,
    })
      .then(res => {
        console.log(res);
        return {
          username: res?.userName || '',
          rightsOrigin: res?.rights || [],
          email: res?.email || '',
        };
      })
      .catch(e => {
        console.warn(e);
        return {};
      });
  };
  return getBlackDiamondInvitationInfo();
};

export default Component;
